<style lang="stylus" scoped>
bgBlue = linear-gradient(to right, #04befe, #4481eb)
nav
  width 100%
  height 50px
  background bgBlue
  img
    display inline-block
    float left
    width 25px
    height 25px
    margin 12px 10px
  p
    display inline-block
    width 80%
    float left
    font-size 18px
    color #ffffff
    text-align center
    line-height 50px
p
  text-align center
.top
  padding 10rem 0 1.5rem 0
  text-align center
  background #f3f3f3
  color #000
.ivu-form-item
  margin-bottom 24px
  vertical-align top
  zoom 1
  width 80%
  margin 1rem 10%
button
  width 92%
  margin 4%
</style>
<template>
  <div>
    <nav>
        <img @click="onClose" src="./imgs/icon-left.png" alt="">
        <p>购买pos机</p>
    </nav>
    <p class="top">请选择pos机，填入您的收获信息</p>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
      <FormItem prop="userName">
        <Input type="text" v-model="formInline.userName" placeholder="请输入收件人姓名"/>
        <Icon type="android-person" slot="prepend"></Icon>
      </FormItem>
      <FormItem prop="userPhone">
        <Input type="text" v-model="formInline.userPhone" placeholder="请输入收件人电话"/>
        <Icon type="ios-telephone" slot="prepend"></Icon>
      </FormItem>
      <FormItem prop="userAddress">
        <Input type="text" v-model="formInline.userAddress" placeholder="请输入收件人地址"/>
        <Icon type="card" slot="prepend"></Icon>
      </FormItem>
      <FormItem>
        <div class="wykh_text">选择pos机</div>
        <div class="wykh_input">
           <i-select v-model="cardList1" style="width:200px">
            <i-option v-for="item in cardList" :value="item.posId" :key="item.posId">{{ item.posName }}</i-option>
          </i-select>
        </div>
      </FormItem>
      <!-- <FormItem>
        <div class="wykh_text">选择pos机2</div>
        <div class="wykh_input">
          <i-select v-model="cardList2" style="width:200px">
            <i-option v-for="item in cardList" :value="item.posId" :key="item.posId">{{ item.posName }}</i-option>
          </i-select>
        </div>
      </FormItem> -->
      <FormItem>
        <Button type="primary" @click="handleSubmit">提交</Button>
      </FormItem>
    </Form>
    <!-- <Button type="primary">Primary</Button> -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "InputInfo",
  data() {
    return {
      formInline: {
        userName: "",
        userPhone: "",
        userAddress: "",
        status:"",
      },
      ruleInline: {
        userName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        userPhone: [
          {
            required: true,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        userAddress: [
          {
            required: true,
            message: "请输入地址",
            trigger: "blur"
          }
        ]
      },
      cardList: [],
      cardList1:"",
      cardList2:"",
      cardList1Name:"",
      cardList2Name:""
    };
  },
  mounted () {
    if(this.$route.query.status > 0){
      this.status = this.$route.query.status;
    }else{
      if(!this.$store.state.show){
        this.$router.push({path: '/repayment'});
      }
    }

  },
  created() {
    var _this = this;
    axios
      .post("/web/api/podji/list")
      .then(function(res) {
        var data = res.data.date;
        _this.cardList = data;
        console.log(data);
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  methods: {
    onClose(){
      this.$router.back(-1)
    },
    handleSubmit() {
      // console.log("userInfo:", this.$store.state.user.userId);
      var _this = this;
        if(_this.formInline.userName==""){
          this.$Message.error("请填写姓名");
          return;
        }
        if(_this.formInline.userPhone==""){
          this.$Message.error("请填写电话");
          return;
        }
        if(_this.formInline.userAddress==""){
          this.$Message.error("请填写地址");
          return;
        }
        if(_this.cardList1==""){
          this.$Message.error("请选择购买的第一个pos机");
          return;
        }

        console.log("_this.cardList1",_this.cardList1)

        for (let index = 0; index < this.cardList.length; index++) {
          const element = this.cardList[index];
          if(_this.cardList1 == element.posId){
            console.log("_this.cardList1111",_this.cardList1)
            _this.cardList1Name = element.posName
          }
          // if(_this.cardList2 == element.posId){
          //   console.log("_this.cardList2222",_this.cardList2)
          //   _this.cardList2Name = element.posName
          // }
        }

        var params={};
        if(this.status > 0){
          params = {
            userId: _this.$route.query.userId,
            userPhone: _this.formInline.userPhone,
            posId1: _this.cardList1,
            posName1: _this.cardList1Name,
            userName: _this.formInline.userName,
            userAddress: _this.formInline.userAddress,
            terminalNumber:"",
            status:this.status
          }
        }else{
          params = {
            userId: _this.$store.state.user.userId,
            userPhone: _this.formInline.userPhone,
            posId1: _this.cardList1,
            posName1: _this.cardList1Name,
            userName: _this.formInline.userName,
            userAddress: _this.formInline.userAddress,
          }
        }


        console.log("params==",params);
      axios
        .post("web/api/manager/buyPosji", params)
        .then(function(res) {
          var data = res.data.date;
          _this.$Message.success(res.data.message);
          if(this.status > 0){

          }else{
            _this.$router.push({path: '/repayment'});
          }

        })
        .catch(err => {
          console.log("err:", err);
        });
    }
  }
};
</script>


